<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="add('0','1','add')">添加权限</el-button>
        </el-row>
        <el-divider />
        <el-table :data="tableData" border row-key="id">
          <el-table-column align="center" label="权限名称" prop="title" />
          <el-table-column align="center" label="权限标识" prop="code" />
          <el-table-column align="center" label="权限描述" prop="description" />
          <el-table-column align="center" label="操作">
            <template v-slot="{row}">
              <el-button v-if="row.type === '1'" plain size="small" type="primary" @click="add(row.id,'2','add')">添加子权限</el-button>
              <el-button size="small" plain @click="edit(row.id,'','edit')">编辑</el-button>
              <el-button size="small" plain type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 权限弹窗 -->
      <el-dialog :title="title" :visible="showDailog" @close="cancel">
        <el-form ref="form" :model="formData" :rules="rules">
          <el-form-item label="权限名称" prop="title" label-width="120px">
            <el-input v-model="formData.title" style="width: 80%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code" label-width="120px">
            <el-input v-model="formData.code" style="width: 80%" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description" label-width="120px">
            <el-input v-model="formData.description" style="width: 80%" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button size="mini" type="primary" @click="submit">确认</el-button>
          <el-button size="mini" @click="cancel">取消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { addPerm, deletePerm, getPerm, permDetails, updatePerm } from '@/api/permissions'
import { listToTree } from '@/utils'
export default {
  data() {
    return {
      tableData: [],
      formData: {
        title: '', // 标题
        code: '', // 标识
        description: '', // 描述
        pid: '0', // 父权限id没有的话就是0
        type: '1' // 层级类型 1 或者 2
      },
      rules: {
        title: [{ required: true, message: '该权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '该权限标识不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '该权限描述不能为空', trigger: 'blur' }]
      },
      showDailog: false, // 控制权限弹窗
      openTitle: '' // 弹窗标题
    }
  },
  computed: {
    title() {
      if (this.openTitle === 'add') {
        return '添加权限'
      } else {
        return '编辑权限'
      }
    }
  },
  created() {
    this.getPermList()
  },
  methods: {
    async getPermList() { // 获取权限列表
      const res = await getPerm()
      this.tableData = listToTree(res.data, 0)
    },
    add(id, type, txt) { // 添加权限按钮
      this.openTitle = txt
      this.showDailog = true
      if (type) {
        this.formData.pid = id.toString()
        this.formData.type = type
      }
    },
    async edit(id, type, txt) { // 编辑按钮
      this.showDailog = true
      this.openTitle = txt
      if (id) {
        const res = await permDetails(id)
        this.formData = res.data
      }
    },
    cancel() { // 退出权限弹窗
      this.showDailog = false
      // 手动清空表单
      this.formData = {
        title: '', // 标题
        code: '', // 标识
        description: '', // 描述
        pid: '0', // 父权限id没有的话就是0
        type: '1' // 层级类型 1 或者 2
      }
    },
    async submit() {
      // 校验表单
      this.$refs.form.validate()
      if (this.openTitle === 'edit') {
        await updatePerm(this.formData)
        // 提示
        this.$message.success('修改权限成功')
      } else {
        // 调用添加接口
        await addPerm(this.formData)
        // 提示
        this.$message.success('添加权限成功')
      }
      // 刷新列表
      this.getPermList()
      // 退出弹窗
      this.cancel()
    },
    del(id) {
      this.$confirm('确定删除该权限吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deletePerm(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新列表
        this.getPermList()
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    }
  }
}
</script>

<style>

</style>
